<template>
  <div id="musicBox" class="music-box">
    <div class="playing-music">
      <span class="playing-music-name">{{ playInf.name }}</span>
    </div>
    <div>
      <span class="show-content-btn" @click="isShowDetail = !isShowDetail">{{
        isShowDetail ? "收起" : "展开"
      }}</span>
    </div>
    <div v-show="isShowDetail">
      <div>
        <audio
          id="musicAudio"
          class="music-audio"
          controls="controls"
          height="50"
          width="50"
          loop
        >
          <source :src="playInf.url" type="audio/mp3" />
        </audio>
      </div>
      <div class="music-box-headed">
        <el-input
          placeholder="请输入关键字进行搜索"
          v-model="keyword"
          class="input-keyword"
        >
        </el-input>
        <em class="el-icon el-icon-search" @click="resetSearch()"></em>
        <em
          class="el-icon el-icon-arrow-up el-icon-arrow"
          v-if="!showList"
          @click="showList = !showList"
        ></em>
        <em
          class="el-icon el-icon-arrow-down el-icon-arrow"
          v-else
          @click="showList = !showList"
        ></em>
      </div>
      <div id="musicBoxBody" class="music-box-body" v-show="showList">
        <div v-for="music in musicList" :key="music.id" class="music-item">
          <span
            :class="{
              'music-info-active': playInf.id == music.id,
              'music-info': true
            }"
            >{{ getMusicInfo(music) }}</span
          >
          <span
            v-if="playInf.id == music.id"
            :class="{
              'music-pause': playInf.id == music.id,
              'el-icon-video-pause': isPlaying,
              'el-icon-video-play': !isPlaying
            }"
            @click="pauseMusic()"
          ></span>
          <span
            v-else
            class="music-play el-icon-video-play"
            @click="playMusic(music)"
          ></span>
        </div>
        <el-pagination
          :page-size="limit"
          :pager-count="5"
          layout="prev, pager, next"
          :total="total"
          :small="true"
          :current-page="currentPage"
          hide-on-single-page
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import VueResource from "vue-resource";
Vue.use(VueResource);
export default {
  name: "musicBox",
  data() {
    return {
      keyword: "",
      musicDefaultPath: "https://autumnfish.cn",
      limit: 30,
      offset: 0,
      showList: false,
      musicList: [],
      playInf: {
        name: "庐州月 -- 许嵩",
        id: "167850",
        url:
          "http://m7.music.126.net/20221118002809/2a897b217911f169ab4808bb57ed2c12/ymusic/ccee/ab4f/896e/b5a7d7db651815b7b27362af21ec6495.mp3"
      },
      total: 0,
      currentPage: 1,
      isPlaying: false,
      isShowDetail: false
    };
  },
  created() {
    // this.resetSearch();
  },
  mounted() {
    this.autoPlay();
  },
  methods: {
    autoPlay() {
      //   this.$confirm("是否播放背景音乐", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "info"
      //   })
      //     .then(() => {
      //       const musicAudio = document.getElementById("musicAudio");
      //       musicAudio.play();
      //     })
      //     .catch(() => {});
      const musicAudio = document.getElementById("musicAudio");
      musicAudio && musicAudio.play();
      this.isPlaying = !musicAudio.paused;
      console.log("musicAudio.paused: ", musicAudio.paused);
    },
    handleCurrentChange(current) {
      this.currentPage = current;
      this.searchByKey();
    },
    pauseMusic() {
      const musicAudio = document.getElementById("musicAudio");
      if (!musicAudio) return;
      console.log("this.isPlaying", this.isPlaying);
      if (this.isPlaying) musicAudio.pause();
      else musicAudio.play();
      this.isPlaying = !musicAudio.paused;
    },
    async playMusic(music) {
      const res = await this.$http.get(
        this.musicDefaultPath + "/song/url?id=" + music.id
      );
      this.playInf = {
        url: res.data.data[0].url,
        id: music.id,
        name: this.getMusicInfo(music)
      };
      const musicAudio = document.getElementById("musicAudio");
      if (!musicAudio) return;
      musicAudio.setAttribute("src", res.data.data[0].url);
      musicAudio.play();
      this.isPlaying = !musicAudio.paused;
    },
    getMusicInfo(music) {
      const singer = music.ar.map(item => {
        return item.name;
      });
      return music.name + " -- " + singer.join("/");
    },
    resetSearch() {
      this.offset = 0;
      this.currentPage = 1;
      this.searchByKey();
    },
    async searchByKey() {
      try {
        document.getElementById("musicBoxBody").scroll(0, 0);
      } catch (e) {}
      this.showList = true;
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: "加载中", //显示在加载图标下方的加载文案
        target: document.getElementById("musicBoxBody") //loadin覆盖的dom元素节点
      });
      const params = {
        keywords: this.keyword,
        limit: this.limit,
        offset: (this.currentPage - 1) * this.limit
      };
      let paramStr = "";
      for (const key in params) {
        if (paramStr) paramStr += "&";
        paramStr += key + "=" + params[key];
      }
      const res = await this.$http.get(
        this.musicDefaultPath + "/cloudsearch?" + paramStr
      );
      this.musicList = res.data.result.songs;
      this.total = res.data.result.songCount;
      loading.close();
    }
  }
};
</script>
<style lang="less">
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}
.music-box {
  position: fixed;
  right: 20px;
  width: 280px;
  top: 50%;
  border: solid 1px #1864ab;
  background: rgba(34, 139, 230, 0.8);
  border-radius: 10px;
  .show-content-btn {
    cursor: pointer;
    color: #fff;
    &:hover {
      color: #c92a2a;
    }
  }
  .playing-music {
    color: #fff;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    .playing-music-name {
      text-align: center;
      font-weight: bold;
      background-image: -webkit-linear-gradient(
        left,
        #ee750c,
        #fff 25%,
        #ee750c 50%,
        #fff 75%,
        #ee750c
      );
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 2s infinite linear;
    }
  }
  .music-audio {
    height: 20px;
    width: 100%;
    margin-top: 5px;
  }
  .music-box-headed {
    display: flex;
    padding: 5px 10px;
    .input-keyword {
      .el-input__inner {
        height: 25px;
      }
    }
    .el-icon-search {
      color: #fff;
    }
    .el-icon-arrow {
      color: #c92a2a;
    }
    .el-icon {
      margin: auto;
      width: 40px;
      cursor: pointer;
    }
  }
  .music-box-body {
    padding: 5px 10px;
    min-height: 6rem;
    max-height: 10rem;
    overflow-y: scroll;
    background-image: repeating-linear-gradient(
      45deg,
      #228be6 0,
      #228be6 1px,
      transparent 0,
      transparent 2%
    );
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    .music-item {
      display: flex;
      border-bottom: #1864ab solid 1px;
      line-height: 1.5;
      cursor: pointer;
      .music-info {
        width: 90%;
        text-align: left;
        display: inline-block;
      }
      .music-info-active {
        color: #c92a2a;
      }
      .music-play {
        margin: auto;
        cursor: pointer;
      }
      .music-pause {
        color: #c92a2a;
        margin: auto;
      }
    }
  }
}
.music-box {
  visibility: visible;
}
@media screen and (max-width: 980px) {
  .music-box {
    visibility: hidden;
  }
}
</style>
